<template>
  <el-row class="search-row" :gutter="10">
    <el-col :sm="24" :lg="12">
      <el-card>
        <div slot="header" class="clearfix">
          <span>线上热门搜索</span>
          <i class="el-icon-more" />
        </div>
        <el-row :gutter="10">
          <el-col :sm="24" :lg="12">
            <div class="chart-bar-detail-header">
              <span>搜索用户数</span>
              <i class="el-icon-warning-outline" />
            </div>
            <div class="chart-bar-detail-footer">
              <span class="span-left">12321</span>
              <span class="span-right">17.1</span>
              <i class="el-icon-caret-top" />
            </div>
            <div class="search-chart-bar bar-top">
              <UserChart />
            </div>
          </el-col>
          <el-col :sm="24" :lg="12">
            <div class="chart-bar-detail-header">
              <span>搜索用户数</span>
              <i class="el-icon-warning-outline" />
            </div>
            <div class="chart-bar-detail-footer">
              <span class="span-left">12321</span>
              <span class="span-right">17.1</span>
              <i class="el-icon-caret-top" />
            </div>
            <div class="search-chart-bar bar-bottom">
              <UserChart />
            </div>
          </el-col>
        </el-row>
        <el-table :data="table" border>
          <el-table-column type="index" label="排名" align="center" />
          <el-table-column prop="keyword" label="搜索关键字" align="center" />
          <el-table-column
            prop="userNum"
            label="用户数"
            align="center"
            sortable
          />
          <el-table-column
            prop="upper"
            label="周涨幅"
            align="center"
            sortable
          />
        </el-table>
        <el-pagination
          :page-size="20"
          :pager-count="7"
          layout="prev, pager, next"
          :total="1000"
          class="search-pagination"
        >
        </el-pagination>
      </el-card>
    </el-col>
    <el-col :sm="24" :lg="12">
      <el-card class="search-card-header">
        <div slot="header" class="clearfix">
          <span>线上热门搜索</span>
          <el-radio-group v-model="radio" size="mini">
            <el-radio-button label="all">全部渠道</el-radio-button>
            <el-radio-button label="online">线上</el-radio-button>
            <el-radio-button label="offline">门店</el-radio-button>
          </el-radio-group>
        </div>
        <ChartPie />
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import ChartPie from './components/ChartPie.vue'
import UserChart from './components/UserChart'

export default {
  name: 'Search',
  components: {
    ChartPie,
    UserChart
  },
  data() {
    return {
      // 单选框，默认选中第一项
      radio: 'all',
      table: [
        {
          keyword: '杭州',
          userNum: 3548,
          upper: 8159
        },
        {
          keyword: '太原',
          userNum: 2297,
          upper: 5693
        },
        {
          keyword: '成都',
          userNum: 1635,
          upper: 4850
        },
        {
          keyword: '济南',
          userNum: 1320,
          upper: 2045
        },
        {
          keyword: '合肥',
          userNum: 151,
          upper: 269
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.clearfix {
  display: flex;
  justify-content: space-between;
  align-items: center;
  span {
    color: #303133;
  }
}
.clearfix:before,
.clearfix:after {
  display: none;
}
.search-row {
  margin-bottom: 10px;
}
// 搜索用户数
.search-chart-bar {
  height: 100px;
}
.bar-top {
  margin-top: 10px;
}
.bar-bottom {
  margin-bottom: 10px;
}
// 分页器
.search-pagination {
  float: right;
  margin: 10px 0;
}
// 搜索用户数数据样式
.chart-bar-detail-header {
  height: 16px;
  line-height: 16px;
  span {
    margin-right: 20px;
    color: #8080a1;
  }
  i {
    color: #c9c9c9;
  }
}
.chart-bar-detail-footer {
  margin: 10px 0;
  .span-left {
    margin-right: 40px;
    color: #303133;
    font-size: 24px;
  }
  .span-right {
    margin-right: 5px;
    color: #808080;
  }
  .el-icon-caret-top {
    color: red;
  }
}
</style>
